<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单验证</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .box{
            width: 550px;
            padding: 15px;
            margin: 20px auto;
            border: 5px solid pink;
        }
        form{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        form>div{
            width: 100%;
            display: flex;
            align-items: center;
            margin: 10px 0;
        }
        form>div p{
            width: 70px;
            text-align: center;
        }
        form>div input{
            margin-right: 20px;            
        }
        button{
            width: 100px;
            height: 25px;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <form action="#">
            <div>
                <p>用户名</p>
                <input type="text" class="userName">
                <span>不允许数字开头，不允许出现符号6-10</span>
            </div>
            <div>
                <p>密码</p>
                <input type="text" class="userPwd">
                <span>由数字、字母、下划线组成6-12</span>
            </div>
            <div>
                <p>手机号</p>
                <input type="text" class="phone">
                <span>以1开头，判断是否+86</span>
            </div>
            <div>
                <p>邮箱</p>
                <input type="text" class="email">
                <span>判断qq、163、sina邮箱</span>
            </div>
            <button>提交</button>
        </form>
        <div class="warning"></div>
    </div>
</body>
<script>
    let btn = document.querySelector('button');

    let nameReg = /^[a-zA-Z][0-9a-zA-Z]{5,9}$/;
    let pwdReg = /^\w{6,12}$/;
    let phoneReg = /^(\+86)?1[0-9]{2,10}$/
    let emailReg = /^\w+@(qq|163|sina)\.(com|cn)$/
    btn.onclick = ()=>{
        let userName = document.querySelector('.userName').value;
        let userPwd = document.querySelector('.userPwd').value;
        let phone = document.querySelector('.phone').value;
        let email = document.querySelector('.email').value;

        let warning = document.querySelector('.warning');
        warning.innerHTML = '';
        function createItem(text){
            let p = document.createElement('p');
            p.innerText = text;
            warning.appendChild(p);
        }

        if(!nameReg.test(userName)){
            createItem('*用户名格式错误！');
        }
        if(!pwdReg.test(userPwd)){
            createItem('*密码格式错误！');
        }
        if(!phoneReg.test(phone)){
            createItem('*手机号格式错误！');
        }
        if(!emailReg.test(email)){
            createItem('*邮箱格式错误！');
        }

        if(warning.innerHTML == ''){
            alert('提交成功');
        }
    }
</script>
</html>